<template>
  <div id="base">
    <h3>进件查询</h3>
    <div id="item">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="证件/人脸核验" name="1" v-if="sct && sct.includes('1')">
          <el-button :disabled="auths.indexOf('基础信息')!=-1" @click="$router.push(`/auth?ID=${ID}`)" style="width: 100%;"
                     type="primary">
            开始证件/人脸核验{{ auths.indexOf('基础信息') != -1 ? '（此链接已核验失效）' : '' }}
          </el-button>
        </el-collapse-item>
        <el-collapse-item title="基础信息" name="2" v-if="sct && sct.includes('2')">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="教育程度" prop="jycd">
              <el-select
                style="width: 100%"
                v-model="form.jycd" placeholder="请选择教育程度">
                <el-option label="小学" value="小学"></el-option>
                <el-option label="初中" value="初中"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="大学" value="大学"></el-option>
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="博士" value="博士"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="婚姻状况" prop="hyzk">
              <el-select
                style="width: 100%"
                v-model="form.hyzk" placeholder="请选择婚姻状况">
                <el-option label="未婚" value="未婚"></el-option>
                <el-option label="已婚" value="已婚"></el-option>
                <el-option label="离异" value="离异"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="居住城市" prop="jzcs">
              <el-cascader
                style="width: 100%"
                size="mini"
                :options="options"
                v-model="form.jzcs"
                :props="{  checkStrictly: false }"
                clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="xxdz">
              <el-input
                style="width: 100%"
                v-model="form.xxdz" placeholder="请输入详细地址"></el-input>
            </el-form-item>
            <el-form-item label="工作单位">
              <el-input
                style="width: 100%"
                v-model="form.gzdw" placeholder="请输入工作单位"></el-input>
            </el-form-item>
            <el-form-item label="单位性质">
              <el-select
                style="width: 100%"
                v-model="form.dwxz" placeholder="请选择单位性质">
                <el-option label="国有企业" value="国有企业"></el-option>
                <el-option label="国有控股企业" value="国有控股企业"></el-option>
                <el-option label="外资企业" value="外资企业"></el-option>
                <el-option label="私有企业" value="私有企业"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在岗位">
              <el-input
                style="width: 100%"
                v-model="form.szgw" placeholder="请输入所在岗位"></el-input>
            </el-form-item>
            <el-form-item label="单位地址">
              <el-input
                style="width: 100%"
                v-model="form.dwdz" placeholder="请输入单位地址"></el-input>
            </el-form-item>
            <el-form-item label="单位电话">
              <el-input
                style="width: 100%"
                v-model="form.dwdh" placeholder="请输入单位电话"></el-input>
            </el-form-item>
            <el-form-item label="芝麻分">
              <el-input
                style="width: 100%"
                v-model="form.zmf" placeholder="请输入芝麻分"></el-input>
            </el-form-item>
            <div class="lxr">
              <h3>联系人1</h3>
              <el-form-item label="姓名">
                <el-input

                  style="width: 100%"
                  v-model="form.lxr[0].xm" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input

                  style="width: 100%"
                  v-model="form.lxr[0].lxfs" placeholder="请输入联系方式"></el-input>
              </el-form-item>
              <el-form-item label="关系">
                <el-select
                  style="width: 100%"
                  v-model="form.lxr[0].gx" placeholder="请选择关系">
                  <el-option label="父亲" value="父亲"></el-option>
                  <el-option label="母亲" value="母亲"></el-option>
                  <el-option label="兄弟" value="兄弟"></el-option>
                  <el-option label="姐妹" value="姐妹"></el-option>
                  <el-option label="朋友" value="朋友"></el-option>
                  <el-option label="其它" value="其它"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="lxr">
              <h3>联系人2</h3>
              <el-form-item label="姓名">
                <el-input
                  style="width: 100%"
                  v-model="form.lxr[1].xm" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input
                  style="width: 100%"
                  v-model="form.lxr[1].lxfs" placeholder="请输入联系方式"></el-input>
              </el-form-item>
              <el-form-item label="关系">
                <el-select
                  style="width: 100%"
                  v-model="form.lxr[1].gx" placeholder="请选择关系">
                  <el-option label="父亲" value="父亲"></el-option>
                  <el-option label="母亲" value="母亲"></el-option>
                  <el-option label="兄弟" value="兄弟"></el-option>
                  <el-option label="姐妹" value="姐妹"></el-option>
                  <el-option label="朋友" value="朋友"></el-option>
                  <el-option label="其它" value="其它"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="lxr">
              <h3>联系人3</h3>
              <el-form-item label="姓名">
                <el-input
                  style="width: 100%"
                  v-model="form.lxr[2].xm" placeholder="请输入姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系方式">
                <el-input
                  style="width: 100%"
                  v-model="form.lxr[2].lxfs" placeholder="请输入联系方式"></el-input>
              </el-form-item>
              <el-form-item label="关系">
                <el-select
                  style="width: 100%"
                  v-model="form.lxr[2].gx" placeholder="请选择关系">
                  <el-option label="父亲" value="父亲"></el-option>
                  <el-option label="母亲" value="母亲"></el-option>
                  <el-option label="兄弟" value="兄弟"></el-option>
                  <el-option label="姐妹" value="姐妹"></el-option>
                  <el-option label="朋友" value="朋友"></el-option>
                  <el-option label="其它" value="其它"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-button style="width: 100%;" type="primary" @click="onSubmit">提交</el-button>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
  import {options} from '@/utils/options.js'

  import {addRefer, faceResult, getQuery, referAuth} from '@/api/system/query'

  import {Loading} from "element-ui";

  export default {
    name: "refer",
    data() {
      return {
        ID: undefined,
        ac: undefined,
        sct: undefined,

        auths: [],
        activeNames: [],
        form: {
          jycd: '',
          hyzk: '',
          jzcs: '',
          xxdz: '',
          gzdw: '',
          dwxz: '',
          szgw: '',
          dwdz: '',
          dwdh: '',
          zmf: '',
          lxr: [{
            xm: '',
            lxfs: '',
            gx: ''
          }, {
            xm: '',
            lxfs: '',
            gx: ''
          }, {
            xm: '',
            lxfs: '',
            gx: ''
          }]
        },
        // 表单校验
        rules: {
          jycd: [
            {required: true, message: "请选择教育程度", trigger: "blur"}
          ],
          hyzk: [
            {required: true, message: "请选择婚姻状况", trigger: "blur"}
          ],
          jzcs: [
            {required: true, message: "请选择居住城市", trigger: "blur"}
          ],
          xxdz: [
            {required: true, message: "详细地址不能为空", trigger: "blur"}
          ],
          xm: [
            {required: true, message: "至少需一个联系人姓名", trigger: "blur"}
          ],
          lxfs: [
            {required: true, message: "至少需一条联系人联系方式", trigger: "blur"}
          ],
          gx: [
            {required: true, message: "至少需一条联系人关系", trigger: "blur"}
          ]
        },
        options
      }
    },
    created() {
      this.sct = this.$route.query.sct
      if (this.sct) {
        this.activeNames.push(this.sct)
      }
      if (this.$route.query.code) {
        if (this.$route.query.code == '0') {
          this.$modal.msgSuccess('人脸核身成功')
        } else {
          this.$modal.msgWarning('人脸核身失败')
        }
      }

      if (!this.$route.query.ID) {
        Loading.service({
          text: "非法链接",
          spinner: "el-icon-error",
          background: "rgba(0, 0, 0, 0.7)",
        })
        return
      }

      this.ID = this.$route.query.ID
      if (this.$route.query.orderNo) {
        faceResult({
          orderNo: this.$route.query.orderNo,
          ID: this.ID
        })
      }

      let ac = this.$route.query.ac
      this.ac = ac
      getQuery(this.ID).then(res => {
        if (res.code != 200 || ac != res.data.authCode) {
          Loading.service({
            text: "链接已失效",
            spinner: "el-icon-error",
            background: "rgba(0, 0, 0, 0.7)",
          })
        }
      })
    },
    mounted() {
      referAuth(this.ID, this.ac).then(res => {
        console.log('---auths---', res.data)
        this.auths = res.data
      })
    },
    methods: {
      onSubmit() {
        this.$refs["form"].validate(valid => {
            if (valid) {
              addRefer({
                  data: JSON.stringify(this.form),
                  ID: this.ID
                }
              ).then(res => {
                if (res.code == 200) {
                  this.$modal.msgSuccess('提交成功')
                } else {
                  this.$modal.msgWarning('提交失败')
                }
              })
            }
          }
        )
      }
    }
  };
</script>

<style scoped>
  #base {
    margin: 10px;
  }

  #item {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    border-radius: 8px;
    padding: 0 5px;
  }

  .lxr {
    margin: 5px 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    border-radius: 8px;
    padding: 5px 20px;
  }

  el-input, el-select {
    width: 100%;
  }
</style>
